<template>
  <div class="doc">
    <div class="doc__class" v-for="(cls, index) in tree" :key="index">
      <div class="doc__class-name">{{cls.name}}<span class="doc__cls-btn" @click="showCode(cls)">查看代码</span></div>
      <div class="doc__class-super" v-if="cls.superClass"><span>extends</span>{{cls.superClass}}</div>
      <div class="doc__part" v-if="cls.cons">
        <div>Constructor:</div>
        <div class="doc__methods">
          <Method :m="cls.cons"></Method>
        </div>
      </div> 
      <div class="doc__part">
        <div>Methods:</div>
        <div class="doc__methods">
          <div v-for="(m,index) in cls.methods" :key="index" style="padding-top:5px;">
            <div>{{m.name}}<span class="doc__cls-btn" @click="showCode(m)">查看代码</span></div>
            <Method :m="m"></Method>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['tree'],
  methods: {
    showCode(item) {
      const start = item._start != null ? item._start : item.start;
      this.$root.$emit('showCode', [start, item.end]);
    },
  },
};
</script>

<style>
.doc {
  padding: 10px;
  border: solid 1px #eaeaea;
  border-radius: 5px;
}
.doc__class {
  padding: 10px;
  border-bottom: solid 1px #eaeaea;
}
.doc__class:last-child {
  border-bottom: none;
}
.doc__cls-btn {
  color: #39CB8A;
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
  margin-left: 10px;
}
.doc__class-name {
  font-size: 20px;
}
.doc__class-super {
  font-size: 14px;
  color: #999;
}
.doc__class-super > span {
  font-size: 12px;
  color: #ccc;
  margin: 0 10px;
}
.doc__part {
  padding-top: 20px;
}
.doc__methods {
  padding-left: 10px;
}
</style>
